<template>
  <div class="home">
    <!-- banner和导航 -->

    <Title></Title>
    <TopNav class="main-panel"></TopNav>
    <div class="nav_box">
      <div class="inner" style="padding: 0;">
        <div class="nav">
          <ZuoFenLei class="left_right_nav" style="flex: 6;" @fenleiClick="handleClose(); messageAlert()"
            @dataClick="(item) => { listurl(item.class_id) }" :data="classItemData"></ZuoFenLei>
          <div class="nav_right" style="flex: 12;">
            <div class="banner_box">
              <div class="banner">
                <div class="swiper-container">
                  <!-- <div class="swiper-wrapper" v-for="(items, index) in indexdata.data" v-if="items.type === 'banner'"> -->
                  <!-- </div> -->
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in bannerData"><img :src="[item.banner_img]"></div>
                  </div>
                  <!-- 如果需要分页器 -->
                  <div class="swiper-pagination"></div>
                </div>
                <!-- <Banner ></Banner> -->
              </div>
            </div>
          </div>
          <YouFenLei class="left_right_nav" style="flex: 6;"></YouFenLei>
        </div>
      </div>
    </div>
    <MeiTuanGoods :cards="actItemData"></MeiTuanGoods>
    <!-- 列表 -->
    <div class="home_list" id="div_1_1">
      <div class="inner" style="padding: 0;">
        <GoodsList @clickMore="listurl(items.id)" @clickDetail="detailurl" class="list" v-bind="items" :key="index"
          v-for="(items, index) in indexdata.data" v-if="items.type === 'class'">
        </GoodsList>
      </div>
    </div>
    <el-drawer :visible.sync="drawer" size="100%">
      <img :src="[copydata]" alt="" srcset="">
    </el-drawer>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import Title from "../../components/title.vue"
import TopNav from "@/components/TopNav.vue"
import ZuoFenLei from "./components/ZuoFenLei.vue"
import YouFenLei from "./components/YouFenLei.vue"
import MeiTuanGoods from "./components/MeiTuanGoods.vue"
import GoodsList from "./components/GoodsList.vue"
// import dataVThem from '@/assets/data-v/config.js'

import {
  indexapi, noOwningClick,
  pddcopyapi
} from "../../api/http.js"
export default {
  name: 'home',
  data() {
    return {
      indexdata: [],
      copydata: "",
      drawer: false,
      // dataVThem
    }
  },
  computed: {
    // 构建分类数据
    classItemData() {
      let res = [];
      if (!this.indexdata) return res;
      let src = this.indexdata.data
      if (!Array.isArray(src)) return res;
      src.filter(({ type }) => 'class_list' === type)
        .forEach(e => {
          if (Array.isArray(e.data))
            res = res.concat(e.data)
          else
            res.push(e.data)
        })
      return res;
    },
    // 构建轮播数据
    bannerData() {
      let res = [];
      if (!this.indexdata) return res;
      let src = this.indexdata.data
      if (!Array.isArray(src)) return res;
      src.filter(({ type }) => 'banner' === type)
        .forEach(e => {
          if (Array.isArray(e.data))
            res = res.concat(e.data)
          else
            res.push(e.data)
        })
      return res;
    },
    // 构建活动数据
    actItemData() {
      let res = [];
      if (!this.indexdata) return res;
      let src = this.indexdata.data
      if (!Array.isArray(src)) return res;
      src.filter(({ type }) => 'act' === type)
        .forEach(e => {
          if (Array.isArray(e.data))
            res = res.concat(e.data)
          else
            res.push(e.data)
        })
      return res;

    }
  },
  components: {
    Title,
    TopNav,
    ZuoFenLei,
    YouFenLei,
    MeiTuanGoods,
    GoodsList
  },
  async created() {
    const res = await indexapi()
    if (res.data.code === 200) {
      this.indexdata = res.data.data
      this.$nextTick(() => {
        this._banner()
      })
    } else {
      this.indexdata = []
    }
  },
  methods: {
    // 跳转商品详情
    detailurl(item) {
      console.log(item);
      if (item.is_owning === 1) {
        console.log(item);
        if (item.goods_type === 1) {
          noOwningClick();
          window.open(item.jd_path)
        } else if (item.goods_type === 2) {
          noOwningClick();
          window.open(item.tb_path)
        } else {
          this.$router.push({
            path: '/detail',
            query: {
              goodsid: item.goods_id
            }
          })
        }
      } else {
        noOwningClick();
        this.copydata = ""
        this._getpddcopy({
          mp_page: item.page_path
        })
        this.drawer = !this.drawer
      }
    },
    handleClose() {
      console.log(0);
    },
    // 获取拼多多跳转二维码
    async _getpddcopy({ mp_page }) {
      const res = await pddcopyapi({ mp_page })
      if (res.data.code == 200) {
        console.log(res.data.data.qrcode);
        this.copydata = res.data.data.qrcode
      } else {
        this.copydata = ""
      }
    },
    messageAlert() {
      window.open("https://www.baidu.com");
    },
    // 分类 查看更多
    listurl(classid) {
      this.$router.push({
        path: "/list",
        query: {
          classid: classid
        }
      })
    },
    pageurl(url) {
      this.$router.push({
        path: url
      })
    },
    _banner() {
      var mySwiper = new Swiper('.banner .swiper-container', {
        loop: true,
        autoplay: true, //等同于以下设置
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        }

      })
    }

  },
  mounted: function () {

  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import url('~@/assets/style/var.less');
@import url(../../../static/index.less);

/deep/ .el-drawer__wrapper .el-drawer {
  background: rgba(0, 0, 0, 0.6);
}

/deep/ .el-drawer__close-btn {
  font-size: 40px !important;
  color: #fff;
}

/deep/ .el-drawer__body {
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 200px;
    height: 200px;
  }
}

.main-panel {
  width: @main-width;
  margin-top: 1.5rem;
}

.inner {
  width: @main-width;
  margin: 0 auto;
}

@BannerHeight: 100%;

.swiper-container {
  width: 100%;
  height: @BannerHeight;
}

.swiper-wrapper {
  width: 100%;
  height: @BannerHeight;
}

.swiper-slide {
  width: 100%;
  height: @BannerHeight;

  img {
    width: 100%;
    height: 100%;
  }
}

.home {
  min-width: @main-width;
  font-family: 'PingFang SC';
  font-style: normal;


  .nav_box {
    width: 100%;
    padding-top: 15px;

    .nav {
      width: 100%;
      height: 490px;
      display: flex;
      justify-content: space-between;
      @banner-width: 750px;

      .left_right_nav {
        width: (@main-width - @banner-width) / 2;
      }

      .nav_right {
        width: @banner-width;

        .banner_box {
          width: 100%;
          height: @BannerHeight;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .banner {
            width: 724px;
            height: @BannerHeight;

          }
        }
      }
    }
  }
}
</style>
